<template>
  <view class="goods-item">
       <!-- 左边图片 -->
       <view class="left-pic">
         <radio v-if="isShowRadio" class="radio" :checked="item.goods_state" color="#c00000" @click="clickRadio"></radio>
         <image :src="item.goods_small_logo || defalutImg" mode="aspectFill"></image>
       </view>
       <!-- 右边商品描述 -->
       <view class="goods-describe">
         <!-- 标题 -->
         <view class="title">
           {{ item.goods_name }}
         </view>
         <div class="goods-footer">
         <!-- 价钱 -->
         <view class="price">
           ￥{{ priceHandel(item.goods_price) }}
         </view>
         <!-- 数字框 -->
           <view class="num-box">
             <uni-number-box v-if="numBoxShow" :min="1" :max="999" :value="item.goods_count" @change="numBoxChange"></uni-number-box>
           </view>
         </div>
       </view>
     </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
      item:{
        type:Object,
        default:{}
      },
      isShowRadio:{
        type:Boolean,
        defalut:false
      },
      numBoxShow:{
        type:Boolean,
        defalut:false
      }
    },
    data() {
      return {
        defalutImg:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    methods:{
      // 处理价钱
      priceHandel(price) {
        return price.toFixed(2)
      },
      // 点击单选框
      clickRadio() {
        this.$emit('radioChange',{
          goods_id:this.item.goods_id,
          goods_state:!this.item.goods_state
        })
      },
      // 数字框数量发生变化
      numBoxChange(val) {
        this.$emit('numBox-change',{
          goods_id:this.item.goods_id,
          goods_count: +val
        })
      }
    }
  }
</script>

<style scoped lang="scss">
 .goods-item {
      display: flex;
      width: 100%;
      height: 300rpx;
      border-bottom: 1px solid #f5f5f5;
      .left-pic {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 260rpx;
        height: 100%;
        image {
          display: block;
          width: 100px;
          height: 100px;
        }
        .radio {
          margin: 0 10rpx;
        }
      }
      .goods-describe {
        flex: 1;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-left: 15rpx;
        padding-right: 20rpx;
        .title {
          font-size: 28rpx;
        }
        .price {
          color: red;
          font-weight: 700;
        }
        .goods-footer {
          display: flex;
          justify-content: space-between;
        }
      }
    }
</style>